<template>
  <div class="container">
    <overview-admin v-if="isAdmin || isFinance" ref="overviewAdmin"></overview-admin>
    <overview-leader v-if="isLeader" ref="overviewLeader"></overview-leader>
    <overview-self v-if="isSale" ref="overviewSelf"></overview-self>
    <sale-team v-if="isAdmin  || isFinance" ref="saleTeam"></sale-team>
    <sale-person v-if="isLeader || isAdmin  || isFinance" ref="salePerson"></sale-person>
  </div>
</template>

<script>
  import overviewAdmin from "./components/overview-admin";
  import overviewLeader from "./components/overview-leader";
  import overviewSelf from "./components/overview-self";
  import saleTeam from "./components/sale-team";
  import salePerson from "./components/sale-person";

  export default {
    data() {
      return {
        isLeader: false,
        isAdmin: false,
        isFinance: false,
        isSale: false,
      };
    },
    components: {
      overviewAdmin,
      overviewLeader,
      overviewSelf,
      saleTeam,
      salePerson
    },
    methods: {},
    async onShow() {
      wx.showLoading();
      if (!App.loginInfo || !App.loginInfo.token) {
        await App.login();
      }
      this.isLeader = App.isLeader;
      this.isAdmin = App.isAdmin;
      this.isFinance = App.isFinance;
      this.isSale = App.isSale;
      this.$nextTick(() => {
        (this.isAdmin || this.isFinance) && this.$refs.overviewAdmin.init();
        this.isLeader && this.$refs.overviewLeader.init();
        this.isSale && this.$refs.overviewSelf.init();
        (this.isAdmin || this.isFinance) && this.$refs.saleTeam.init();
        (this.isLeader || this.isAdmin || this.isFinance) && this.$refs.salePerson.init();
      })
    }
  };
</script>

<style lang="scss">
  @import "../../styles/base";

  .container {
    padding-top: pxToRem(20);
    .count-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-left: pxToRem(54);
      padding-right: pxToRem(54);
      .count-wrap {
        width: pxToRem(300);
        height: pxToRem(160);
        padding: pxToRem(20);
        margin-top: pxToRem(40);
        border-radius: pxToRem(4);
        box-sizing: border-box;
        &:nth-child(2n) {
          margin-left: pxToRem(40);
        }
        &:nth-child(4n+1) {
          background: linear-gradient(90deg, rgba(151, 150, 240, 1) 0%, rgba(169, 191, 247, 1) 100%);
          box-shadow: 0 pxToRem(4) pxToRem(8) 0 rgba(168, 188, 247, 0.5);
        }
        &:nth-child(4n+2) {
          background: linear-gradient(90deg, rgba(187, 164, 237, 1) 0%, rgba(225, 178, 237, 1) 100%);
          box-shadow: 0 pxToRem(4) pxToRem(8) 0 rgba(202, 170, 237, 0.5);
        }
        &:nth-child(4n+3) {
          background: linear-gradient(90deg, rgba(247, 189, 166, 1) 0%, rgba(255, 210, 189, 1) 100%);
          box-shadow: 0 pxToRem(4) pxToRem(8) 0 rgba(250, 196, 174, 0.5);
        }
        &:nth-child(4n) {
          background: linear-gradient(90deg, rgba(161, 196, 253, 1) 0%, rgba(180, 217, 252, 1) 100%);
          box-shadow: 0 pxToRem(4) pxToRem(8) 0 rgba(170, 206, 252, 0.5);
        }
        .title {
          padding-bottom: pxToRem(20);
          font-size: pxToRem(22);
          color: #fff;
          font-weight: 500;
          line-height: pxToRem(32);
        }
        .number {
          font-size: pxToRem(40);
          line-height: pxToRem(56);
          color: #fff;
          font-weight: 600;
          span {
            color: #f00;
            font-size: pxToRem(30);
            margin-left: pxToRem(10);
          }
        }
      }
    }
  }
</style>
